<%--
  Created by IntelliJ IDEA.
  User: 刘琛
  Date: 2020/8/29
  Time: 15:16
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%pageContext.setAttribute("APP_PATH", request.getContextPath());%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>验收信息</title>

    <meta name="description" content="Static &amp; Dynamic Tables" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${APP_PATH }/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/fonts.googleapis.com.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]-->
    <%--    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />--%>
    <!--[endif]-->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]-->
    <%--    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-ie.min.css" />--%>
    <!--[endif]-->

    <link rel="stylesheet" href="${APP_PATH}/assets/fonts/iconfont.css"/>
    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="${APP_PATH }/assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]-->
    <%--    <script src="${APP_PATH }/assets/js/html5shiv.min.js"></script>--%>
    <%--    <script src="${APP_PATH }/assets/js/respond.min.js"></script>--%>
    <!--[endif]-->
</head>

<body class="no-skin">
<div id="navbar" class="navbar navbar-default          ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small>
                    <i><img src="${APP_PATH}/assets/images/ic_launcher_foreground.png" width="30"></i>
                    智慧维修
                </small>
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="/mmmsimage/${reviewer.icon}" alt="无" />
                        <span class="user-info">
									<small>欢迎,</small>
									${reviewer.name}
								</span>

                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

                        <li>
                            <a href="${pageContext.request.contextPath}">
                                <i class="ace-icon fa fa-power-off"></i>
                                退出登录
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <div id="sidebar" class="sidebar                  responsive                    ace-save-state" style="font-size: large">
        <script type="text/javascript">
            try{ace.settings.loadState('sidebar')}catch(e){}
        </script>


        <ul class="nav nav-list">


            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon iconfont icon-update_status red" style="font-size: large"></i>
                        <span class="menu-text" style="font-size: large">维修信息</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/orderView">
                            <i class="menu-icon fa fa-caret-right"></i>
                            在办维修单
                        </a>
                        <b class="arrow"></b>
                    </li>

                </ul>
                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/orderstatis">
                            <i class="menu-icon fa fa-caret-right"></i>
                            维修信息统计图
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/allOrderinfo">
                            <i class="menu-icon fa fa-caret-right"></i>
                            所有维修信息
                        </a>
                        <b class="arrow"></b>
                    </li>

                </ul>
            </li>

            <!--人员管理功能，查看部门下所有员工信息-->
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon glyphicon glyphicon-user blue" style="font-size: large"></i>
                        <span class="menu-text" style="font-size: large">人员管理</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/peoplestatis">
                            <i class="menu-icon fa fa-caret-right"></i>
                            人员分布统计
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/personManage">
                            <i class="menu-icon fa fa-caret-right"></i>
                            内部人员信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>

            <!--设备管理-->

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon iconfont icon-__equipment orange" style="font-size: large"></i>
                        <span class="menu-text" style="font-size: large">设备管理</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/equip_statis">
                            <i class="menu-icon fa fa-caret-right"></i>
                            设备统计信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/reviewer/equipmentManage">
                            <i class="menu-icon fa fa-caret-right"></i>
                            所有设备信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>


        </ul><!-- /.nav-list -->

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>


    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        维修审批
                    </li>


                </ul><!-- /.breadcrumb -->


            </div>

            <div class="page-content">

                <div class="row">
                    <div class="col-xs-12">
                        <div class="clearfix">
                            <div class="pull-right tableTools-container"></div>
                        </div>

                        <!-- div.table-responsive -->

                        <!-- div.dataTables_borderWrap -->
                        <div>
                            <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>维修单名称</th>
                                    <th>设备名称</th>
                                    <th class="hidden-480">维修方</th>
                                    <th class="hidden-480">维修价格</th>
                                    <th class="hidden-480">解决方案</th>
                                    <th class="hidden-480">申请时间</th>
                                    <th></th>
                                </tr>
                                </thead>

                                <tbody>
                                <c:forEach items="${orders}" var="order" varStatus="status">
                                    <tr>
                                        <td>${status.index+1}</td>
                                        <td>${order.order_name}</td>
                                        <td>${order.equipment_name}</td>
                                        <td>${order.unit_name}</td>
                                        <td>${order.final_price}</td>
                                        <td>${order.solution_word}</td>
                                        <td>
                                            <fmt:formatDate value="${order.createTime}" type="both"/>
                                        </td>
                                        <td>
                                            <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
                                            <a  type="button"  target="_blank" href="${pageContext.request.contextPath}/reviewer/review_receive?id=${order.id}"  role="button" class="green" data-toggle="modal" > 验收详情 </a>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a  type="button"  target="_blank" href="${pageContext.request.contextPath}/approver/completeList?order_id=${order.id}"  role="button" class="green" data-toggle="modal" > 清单 </a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->

<div class="footer">
    <div class="footer-inner">
        <div class="footer-content">
						<i><img src="${APP_PATH}/assets/images/ic_launcher_foreground.png" width="20"></i>
            <span class="bigger-120">
                湖北南星化工总厂 &copy; 2020
            </span>

        </div>
    </div>
</div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script src="${APP_PATH }/assets/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]-->
<%--<script src="${APP_PATH }/assets/js/jquery-1.11.3.min.js"></script>--%>
<!--[endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='${APP_PATH }/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="${APP_PATH }/assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="${APP_PATH }/assets/js/jquery.dataTables.min.js"></script>
<script src="${APP_PATH }/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="${APP_PATH }/assets/js/dataTables.buttons.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.flash.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.html5.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.print.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.colVis.min.js"></script>
<script src="${APP_PATH }/assets/js/dataTables.select.min.js"></script>

<!-- ace scripts -->
<script src="${APP_PATH }/assets/js/ace-elements.min.js"></script>
<script src="${APP_PATH }/assets/js/ace.min.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">


    jQuery(function($) {
        //initiate dataTables plugin
        var myTable =
            $('#dynamic-table')
            //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
                .DataTable( {
                    language: {

                        "sProcessing": "处理中...",

                        "sLengthMenu": "显示 _MENU_ 项结果",

                        "sZeroRecords": "没有匹配结果",

                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",

                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",

                        "sInfoPostFix": "",

                        "sSearch": "搜索:",

                        "sUrl": "",

                        "sEmptyTable": "表中数据为空",

                        "sLoadingRecords": "载入中...",

                        "sInfoThousands": ",",

                        "oPaginate": {

                            "sFirst": "首页",

                            "sPrevious": "上页",

                            "sNext": "下页",

                            "sLast": "末页"

                        },

                        "oAria": {

                            "sSortAscending": ": 以升序排列此列",

                            "sSortDescending": ": 以降序排列此列"

                        }

                    },
                    bAutoWidth: true,
                    "aoColumns": [
                        // { "bSortable": false },
                        null, null, null, null,null,null,null,
                        { "bSortable": false }
                    ],
                    "aaSorting": [],


                    //"bProcessing": true,
                    //"bServerSide": true,
                    //"sAjaxSource": "http://127.0.0.1/table.php"	,

                    //,
                    //"sScrollY": "200px",
                    "bPaginate": true,
                    "sPaginationType": "full_numbers",

                    //"sScrollX": "100%",
                    //"sScrollXInner": "120%",
                    //"bScrollCollapse": true,
                    //Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
                    //you may want to wrap the table inside a "div.dataTables_borderWrap" element

                    //"iDisplayLength": 50


                    select: {
                        style: 'multi'
                    }
                } );



        $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

        new $.fn.dataTable.Buttons( myTable, {
            buttons: [
                {
                    "extend": "colvis",
                    "text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>隐藏/展示列</span>",
                    "className": "btn btn-white btn-primary btn-bold",
                    columns: ':not(:first):not(:last)'
                },

                {
                    "extend": "csv",
                    "text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>导出CSV</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                },
                {
                    "extend": "excel",
                    "text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>导出Excel</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                },
                {
                    "extend": "pdf",
                    "text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>导出PDF</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                },
                {
                    "extend": "print",
                    "text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>打印</span>",
                    "className": "btn btn-white btn-primary btn-bold",
                    autoPrint: false,
                    // message: 'This print was produced using the Print button for DataTables'
                }
            ]
        } );
        myTable.buttons().container().appendTo( $('.tableTools-container') );

        //style the message box
        var defaultCopyAction = myTable.button(1).action();
        myTable.button(1).action(function (e, dt, button, config) {
            defaultCopyAction(e, dt, button, config);
            $('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
        });


        var defaultColvisAction = myTable.button(0).action();
        myTable.button(0).action(function (e, dt, button, config) {

            defaultColvisAction(e, dt, button, config);


            if($('.dt-button-collection > .dropdown-menu').length == 0) {
                $('.dt-button-collection')
                    .wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
                    .find('a').attr('href', '#').wrap("<li />")
            }
            $('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
        });

        setTimeout(function() {
            $($('.tableTools-container')).find('a.dt-button').each(function() {
                var div = $(this).find(' > div').first();
                if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
                else $(this).tooltip({container: 'body', title: $(this).text()});
            });
        }, 500);

        myTable.on( 'select', function ( e, dt, type, index ) {
            if ( type === 'row' ) {
                $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
            }
        } );
        myTable.on( 'deselect', function ( e, dt, type, index ) {
            if ( type === 'row' ) {
                $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
            }
        } );




        /////////////////////////////////
        //table checkboxes
        $('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);

        //select/deselect all rows according to table header checkbox
        $('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
            var th_checked = this.checked;//checkbox inside "TH" table header

            $('#dynamic-table').find('tbody > tr').each(function(){
                var row = this;
                if(th_checked) myTable.row(row).select();
                else  myTable.row(row).deselect();
            });
        });

        //select/deselect a row when the checkbox is checked/unchecked
        $('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
            var row = $(this).closest('tr').get(0);
            if(this.checked) myTable.row(row).deselect();
            else myTable.row(row).select();
        });



        $(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();
        });



        //And for the first simple table, which doesn't have TableTools or dataTables
        //select/deselect all rows according to table header checkbox
        var active_class = 'active';
        $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
            var th_checked = this.checked;//checkbox inside "TH" table header

            $(this).closest('table').find('tbody > tr').each(function(){
                var row = this;
                if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
            });
        });

        //select/deselect a row when the checkbox is checked/unchecked
        $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
            var $row = $(this).closest('tr');
            if($row.is('.detail-row ')) return;
            if(this.checked) $row.addClass(active_class);
            else $row.removeClass(active_class);
        });



        /********************************/
        //add tooltip for small view action buttons in dropdown menu
        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

        //tooltip placement on right or left
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            //var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }




        /***************/
        $('.show-details-btn').on('click', function(e) {
            e.preventDefault();
            $(this).closest('tr').next().toggleClass('open');
            $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
        });
        /***************/





        /**
         //add horizontal scrollbars to a simple table
         $('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
         {
					horizontal: true,
					styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
					size: 2000,
					mouseWheelLock: true
				  }
         ).css('padding-top', '12px');
         */


    })
    function orderDetail(orderId) {
        //reg 为变量，可随意
        var myData = {
            "id": orderId
        };
        $.ajax({
            url : "${pageContext.request.contextPath}/reviewer/findOrder",
            type : "POST",
            dataType:"json",
            contentType : "application/json;charset=UTF-8",
            <!-- 向后端传输的数据 -->
            // stringify
            data : JSON.stringify(myData),
            success:function(data) {
                var obj=eval(data);
                var tbody=$('<tbody></tbody>');
                $(obj).each(function (index){
                    var val=obj[index];
                    var tr=$('<tr></tr>');
                    tr.append('<td>'+ data.maintenance_type_name+'</td>'+'<td>'+data.problem_word+'</td>');
                    // tr.append('<td>'+ val.maintenance_type + '</td>' + '<td>'+ val.problem_word + '</td>');
                    tbody.append(tr);
                });
                $('#orderDetail tbody').replaceWith(tbody);

                $(function(){
                    var problem_images;
                    if (data.problem_image != null){
                        problem_images = data.problem_image.split(",");
                    }
                    var ul = $('<ul></ul>');
                    if (problem_images != null){
                        problem_images.forEach(function (value) {
                            if (value !== ""){
                                var li1 = $('<li></li>');
                                li1.append('<img src="/mmmsimage/' + value +'" onload="resize_img(this,400,300)" alt = "无"/>');
                                ul.append(li1);
                            }
                        });
                    }
                    $('#carousel ul').replaceWith(ul);
                    $(function(){
                        var i=0;
                        var li = $(".lxfscroll li");
                        var n=li.length-1;
                        var speed = 300;
                        li.not(":first").css({left:"400px"});
                        li.eq(n).css({left:"-400px"});
                        lxfNext=function (){
                            if (!li.is(":animated")) {
                                if (i>=n){i=0;li.eq(n).animate({left:"-400px"},speed);
                                    li.eq(i).animate({left:"0px"},speed);
                                }else{i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);};
                                li.not("eq(i)").css({left:"400px"});
                                $("i").text(i+1);
                            }else{};
                        };
                        lxfLast=function (){
                            if (!li.is(":animated")) {
                                if (i<=0){i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);
                                }else{i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);}
                                li.not("eq(i)").css({left:"-400px"});
                                $("i").text(i+1);
                            };
                        };
                    });
                });
            }
        });

        $(function(){
            agree=function () {
                var flag = confirm("是否同意验收该维修单?");
                if (flag === true){
                    var myChoice = {
                        "orderId":orderId,
                    };
                    $.ajax({
                        url : "${pageContext.request.contextPath}/reviewer/revieweRagree",
                        type : "POST",
                        dataType:"json",
                        contentType : "application/json;charset=UTF-8",
                        data:JSON.stringify(myChoice),
                        <!-- 向后端传输的数据 -->
                        success:function() {
                        }
                    });
                    setTimeout(function (){
                        window.location.reload();
                    }, 1000);
                }

            }
            disagree = function() {
                var objSelect= document.getElementById("s1");
                var d = objSelect.options[objSelect.selectedIndex].innerText;
                var flag = confirm("确认驳回该条维修单！原因为："+d);
                if (flag === true){
                    var myData = {
                        "orderId":orderId,
                        "reason":d
                    };
                    $.ajax({
                        url : "${pageContext.request.contextPath}/reviewer/reviewerDisagree",
                        type : "POST",
                        dataType:"json",
                        contentType : "application/json;charset=UTF-8",
                        <!-- 向后端传输的数据 -->
                        // stringify
                        data : JSON.stringify(myData),
                        //success(){

                        //}
                    });
                    setTimeout(function (){
                        window.location.reload();
                    }, 1000);
                }
            }


        });

    }
    function resize_img(pic,w,h){
        var re_new_size=function(r){
            //根据比率重新计算宽度
            return {w:pic.width/r,h:pic.height/r};
        };
        var re_offset=function(n){
            //根据新的宽高度返回偏移量
            return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5};
        };
        var re_position=function(o,n){
            //重新定位图片
            pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;";
        };
        var execute=function(rate){
            var new_size=re_new_size(rate),
                offset_new=re_offset(new_size);
            re_position(offset_new,new_size);
        };
        var rate_of_w=pic.width/w,
            rate_of_h=pic.height/h,
            rate;
        if(rate_of_w>=1){
            //图片宽度大于显示区域宽度
            if(rate_of_h>=1){
                //且图片高度大于显示区域高度
                rate=Math.min(rate_of_w,rate_of_h);
            }else{
                //图片高度小于显示区域
                rate=pic.height/h;
            }
        }else{
            //图片宽度小于显示区域宽度
            if(rate_of_h>=1){
                //且图片高度大于显示区域高度
                rate=pic.width/w;
            }else{
                //图片高度小于显示区域高度
                rate=Math.min(rate_of_w,rate_of_h);
            }
        }
        execute(rate);
        //执行入口
    }
</script>
<style type="text/css">
    .lxfscroll {
        width:400px;
        margin-left:auto;
        margin-right:auto;
        margin-top: 20px;
        overflow: hidden;
        position: relative;
        height: 300px;
        border: 1px dashed #CCC;
    }
    .lxfscroll ul li {
        height: 300px;
        width: 400px;
        text-align: center;
        line-height: 300px;
        position: absolute;
        font-size: 40px;
        font-weight: bold;
    }
    .button {
        margin-right:auto;
        margin-left:auto;
        width:400px;
        text-align:center;
        padding-top: 10px;
    }
    #img{ width:300px; height:400px; position:relative; overflow:hidden; background:#996699;}
    .button input {
        padding-top: 4px;
        padding-right: 12px;
        padding-bottom: 4px;
        padding-left: 12px;
    }
</style>
</body>
</html>


